Getting Started

What is NoteMaker

NoteWorks version 4.7 and above supports skinned notes.  A skinned note is a note that derives its shape from an image.  Skinned notes are mostly for fun and usually don't serve any practical purpose.  NoteWorks comes with several skins, but knowing that everyone's taste is different we've come up with a simple way for you to create your own skins.  NoteMaker is designed for that purpose and that purpose alone.  With it, you can create your own skinned note by defining the primary image, the close button images and the areas in which the message and title text will appear.

Limitations of Skins

The biggest limitation of skins currently is that they are not resizable.  This may change in the future, but currently, the level of complexity in creating a resizable skin is not worth the potential gain in our opinion.  As users play with this new feature, that may change, of course.

Preparations

Before you can start using NoteMaker you need, at a minimum, only one thing: an image that will be your note.  This image can be anything that will fit a reasonable amount of text and must be in bitmap form (a filename ending in ".bmp").  If you want the user of your note to be able to close the note by clicking a button, you must fashion at least one other image that will represent that button.  Again, this image must be in bitmap form.  Finally, and least necessary, is the rollover image for the button.  This is the image that will appear when the user hovers the mouse over the close button.  This image is usually the same size as the close button image, but is slightly different so that the user knows that clicking the mouse button at that point will do something.

Output

When you've created your note using NoteMaker and save it, NoteMaker will generate a [skinname].skn file which you can drop into the NoteWorks directory "_NoteSkins" which is located in the same folder as the NoteWorks executable.  That's the last step in creating a skin.

Click here to find out how to use NoteMaker


Using NoteMaker

Pick Bitmaps

As mentioned in "Getting Started" you should have at least one bitmap created.  This bitmap is known as the "Main Window" bitmap and will represent the shape and look of the note.  For the sake of explanation we will assume that the bitmap name is "MyMainWindow.bmp" and is located in "C:\My Documents\My Pictures\".

Components

When you first open NoteMaker you'll notice that at the top of the dialog is a "Component" field.  Notes can be broken down into components.  These components are:

- Main Window - The actual note

- Title - The area designated for the title of the note

- Close Button - The button the user can use to close (hide) the note

- Close Button Mouse Over - The image that appears when the user hovers the mouse over the close button area

- Message - The area designated for the text of the note.

The selection in this field indicates what all the other properties in the dialog are referring to.  Some of the properties don't apply to all of the components.  For example, the bounding rectangler fields don't apply to the main window component since the bounding rectangle is defined by the user when he or she places the note on screen.

Bitmap

The next field in the dialog is the Bitmap field.  Use this field to indicate what the selected component is to use as its source image.  If this field is disabled, then the component doesn't have an associated image.  For example, the title component doesn't have an associated image because it's only property is its bounding rectangle.

To select a bitmap, press the "..." button.  This will open a dialog which will allow you to navigate to a bitmap file.  Press "Open" when done.  The file path will appear in the edit box.

Now that you have a bitmap, you usually need to define the "Transparency Color".  This tells NoteWorks what color will note be drawn when displaying the note.  This is usually a background color that is putridly and unique to the image so that you don't inadvertantly make transparent an import part of the image.  You can select a transparency color in two ways:

1 - Color Dialog.  By pressing the "Transparency..." button a color dialog will appear.  Selet the color that is to be made transparent and press OK.

2 - Color Picker Tool - Press the button with the image of an eye dropper.  Now when you move the cursor over the image to the right, the cursor will take the shape of an eyedropper.  Click the mouse over the color you wish to be made transparent.  That's all there is to it.  You should now see the image update hiding all parts of the image that match that color.

Note: When you've loaded a skin from a ".skn" file you will notice that an image appears in the preview area, but there's no path to a file in the Bitmap field.  This is because the filepath is not stored with the skin file (the skin file only stores the pixels that define the bitmap).  You can do everything you would normally be able to do with this image, though (such as selecting transparencies) except use the "Open Image In Bitmap Editor" menu item (see below).

Bounding Rectangle

The bounding rectangle defines where the current component will be placed relative to the top left point of the Main Window image.  When a component that has a Bounding Rectangle property is selected, you may move the mouse over the image preview on the right and click and draw to define a bounding rectangle.  You will know you are able to do this because the cursor takes the shape of a cross-hair.  Also, you may modify a rectangle already there by clickin on a handle to reshape it or click inside to move it.  When a bounding rectangle is modified you will see it's new position updated in the bounding rectangle fields on the left side of the dialog.

Colors and Fonts

These are general properties that can be modified no matter which component is selected.

Message Background - Select the color of the message text background.

Message Foreground - Select the color of the message text

Title Background - Select the color of the title background.

Title Foreground - Select the color of the title text

Message Font - Select the font used to display message text

Title Font - Select the font used to display title text